<template>
  <div class="cardreader-list">
    <Row type="flex" justify="space-between" class="cardreader-list-edit">
      <Form style="width: 100%" class="from" :model="searchObj" label-position="left" inline>
        <Row type="flex" justify="start" inline>
          <Col span="24">
            <Row>
              <!-- <Col>
              </Col>-->
              <FormItem :label-width="72">
                <div slot="label" style="transform: translateX(12px);">门店名称：</div>
                <!-- <Select
                  class="select-shop-item"
                  v-model="searchObj.orgId"
                  filterable
                  @on-change="handleShop"
                  :max-tag-count="1"
                  :max-tag-placeholder="maxTagPlaceholder"
                  style="width:180px"
                >
                  <Option
                    v-for="(item, index) in shopList"
                    :value="item.shopId"
                    :key="index"
                  >{{ item.shopName }}</Option>
                </Select>-->
                <vueTreeselectChoice

                  @input="handleShop"
                  :clearable="false"
                  @on-api-finish='apiFinish'
                  permissionCode="moms:report:devicemonitor"
                  v-model="searchObj.orgId"
                ></vueTreeselectChoice>
              </FormItem>

              <FormItem :label-width="48">
                <div slot="label" style="transform: translateX(12px);">状态：</div>
                <Select @on-change="search" v-model="searchObj.status" style="width:180px">
                  <Option
                    v-for="(item) in statusArr"
                    :key="item.value"
                    :value="item.value"
                  >{{item.lable}}</Option>
                </Select>
                <!-- <Input autocomplete="off" v-model="searchObj.originCardNo" placeholder="请输入" /> -->
              </FormItem>

              <FormItem>
                <Button type="primary" class="coinrevenue-btn" @click="search">查询</Button>
                <Button style="margin-left: 10px" class="coinrevenue-btn" @click="reset">重置</Button>
              </FormItem>
            </Row>
            <Row></Row>
          </Col>

          <!-- <Col span="6">
            <Row type="flex" justify="end">
              <FormItem>
                <Button type="primary" class="coinrevenue-btn" @click="search">查询</Button>
                <Button style="margin-left: 10px" class="coinrevenue-btn" @click="search">重置</Button>
                <Button
                  style="margin-left: 10px"
                  @click="shosMoreSearch = !shosMoreSearch "
                  class="coinrevenue-btn2 concrete-data"
                >
                  {{ shosMoreSearch ? '收起筛选' : ' 更多筛选' }}
                  <Icon :type=" shosMoreSearch? 'ios-arrow-up' : 'ios-arrow-down' " />
                </Button>
              </FormItem>
            </Row>
          </Col>-->
        </Row>
      </Form>
    </Row>
    <!-- :loading="isloading" -->
    <Row type="flex" justify="start">
      <Col span="20" class="status">
        <span class="padding-right">机台总数：{{ statusCount.count }}</span>
        <i class="border"></i>
        <span class="padding-left">
          正常：
          <i class="status-i">{{statusCount.normal}}</i>
        </span>
        <span>
          异常：
          <i class="status-i">{{ statusCount.error }}</i>
        </span>
        <span>
          离线：
          <i class="status-i">{{statusCount.offline}}</i>
        </span>
        <i class="border"></i>

        <span class="padding-left">
          <Poptip trigger="hover" width="300" placement="bottom" word-wrap content="提示语">
            <div slot="content">
              <p>
                <b>离线</b>
              </p>
              <p>1.网络未连接或关机</p>
              <p>2.无法连接消息服务，影响支付和登录</p>
              <p>
                <b>异常</b>
              </p>
              <p>1.广告未配置：无广告</p>
              <p>2.套餐未配置：无套餐</p>
              <p>3.挂载错误：即没有安装SD卡</p>
              <p>4.发卡器错误：无法出卡【无卡/回收箱满/其他错误】</p>
              <p>5.出币器错误：故障/少币</p>
              <p>6.打印机错误：无法正常打印</p>
              <p>7.刷卡器错误：多次连续的读卡失败</p>
              <p>8.扫码仪错误：无法使用扫码仪扫码</p>
            </div>
            <i class="iconsys iconshuoming"></i> 一体机状态说明
          </Poptip>
        </span>
      </Col>

      <Col span="4">
        <Row type="flex" justify="end" style="margin-right: 30px;">
          <Col>
            <Button
              type="primary"
              @click="$router.push({ name: 'report_hardware_machine_card', query: {id: searchObj.orgId} })"
            >出卡监控</Button>
          </Col>
        </Row>
      </Col>
    </Row>
    <Table border :loading="isloading" stripe ref="rowSpanTable" :columns="columns" :data="resData"></Table>
    <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
    <Modal width="300" v-model="modalMachineShow" title="异常信息">
      <section class="modalMachine">
        <!-- <Row v-for="index in 9" :key="index">
          <Col span="12">
            <Row type="flex" justify="start" class="code-row-bg">
              <Col>固定中奖率</Col>
            </Row>
          </Col>
          <Col span="12">
            <Row type="flex" justify="end" class="code-row-bg">
              <Col>18</Col>
            </Row>
          </Col>
        </Row>-->
        <h4>异常详情：</h4>
        <p v-for="(item, index) in errorsList" :key="index">{{index + 1}}、 {{item}}</p>
        <!-- <div v-for="index in 9" :key="index">
          <span>固定中奖率</span>
          <span>18</span>
        </div>-->
      </section>
      <footer slot="footer">
        <!-- <Button @click=" modalMachineShow = false">取消</Button> -->
        <Button type="primary" @click=" modalMachineShow = false">确定</Button>
      </footer>
    </Modal>
  </div>
</template>
<script>
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { machineStatus, machineList } from '@/api/report/hardware'
import dayjs from 'dayjs'
import errorCaptured from '@/libs/errorCaptured'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
export default {
  name: 'report_hardware_cardreader',
  components: {
    vueTreeselectChoice
  },
  data () {
    return {
      shopList: [],
      total: 0,
      isloading: false,

      searchObj: {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        orgId: undefined, // 'e4ef2e0a-0c51-4023-8aaa-487b40493464' ||

        status: -1,
        merchantId: this.$store.state.user.merchantId
      },
      dateOption: {
        disabledDate (date) {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      shosMoreSearch: false,
      // 状态
      statusArr: [
        { value: -1, lable: '全部' },
        { value: 0, lable: '正常' },
        { value: 1, lable: '异常' },
        { value: 2, lable: '离线' }
      ],
      // 状态数量
      statusCount: {
        count: 0, // 总数
        error: 0, // 故障数目
        offline: 0, // 离线数目
        normal: 0 //  normal
      },
      columns: [
        { type: 'index', width: 80, align: 'center', title: '序号' },
        { title: '门店名称', key: 'shopName', align: 'center' },
        { title: '设备名称', key: 'deviceName', align: 'center' },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', { 0: '正常', 1: '异常', 2: '离线' }[params.row.status])
          }
        },
        { title: '固件版本', key: 'version', align: 'center' },
        { title: '统计时间', key: 'updateTime', align: 'center' },
        {
          title: '查看详情',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) return null
            return h('div', [
              h('i', {
                class: ['iconsys', 'icondetail'],
                on: {
                  click: () => {
                    this.errorsList = params.row.errors
                    this.modalMachineShow = true
                  }
                }
              })
            ])
          }
        }
      ],
      resData: [],
      errorsList: [],
      // 机台配置数据
      modalMachineData: [{ key: 'fixation', title: '固定中奖率', value: '18' }],
      modalMachineShow: false,
      isId: false
    }
  },
  computed: {},
  async created () {
    // this.machineList()
    // this.machineStatus()
    // this.newShopPage()
  },
  mounted () {
  },
  methods: {
    apiFinish (isId) {
      this.isId = isId
      if (isId) this.searchObj.orgId = this.$store.state.user.orgId
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.searchObj.pageIndex = val
      this.machineList()
    },
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.machineList()
    },

    // 列表查询
    async machineList () {
      // 列表查询
      let [err, res] = await errorCaptured(machineList, {
        permissionCode: 'moms:report:devicemonitor', // 查看普通订单
        ...this.searchObj,
        orgId: this.searchObj.orgId || this.$store.state.user.orgId,
        status: this.searchObj.status === -1 ? null : this.searchObj.status
      })
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      this.resData = res.data.data || []
      this.total = res.data.totalCount || 0
    },

    // 状态查询
    async machineStatus (list) { // list Boole 是否要在这个接口请求完成后请求列表接口
      let params = {
        merchantId: this.searchObj.merchantId,
        orgId: this.searchObj.orgId || this.$store.state.user.orgId
      }

      let [err, res] = await errorCaptured(machineStatus, params)
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let statusCount = {
        count: 0, // 总数
        error: 0, // 故障数目
        offline: 0, // 离线数目
        normal: 0 //  normal
      }
      // this.resData = res.data.data

      res.data.data &&
        res.data.data.forEach(item => {
          let keys = Object.keys(item)
          keys.forEach(key => {
            if (Reflect.has(statusCount, key)) {
              statusCount[key] += item[key]
            }
          })
        })
      this.statusCount = statusCount
      if (list) this.machineList()
    },

    reset () {
      this.searchObj = {
        offset: 0,
        limit: 10,
        pageIndex: 1,
        orgId: this.isId ? this.$store.state.user.orgId : null,
        status: -1,
        merchantId: this.$store.state.user.merchantId
      }
      this.machineStatus(true)
      // this.machineList()
    },
    // 更改店铺
    handleShop () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.machineStatus(true)
      // this.machineList()
    },
    search () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.machineList()
    }
  }
}
</script>
<style lang="less" scoped>
.cardreader-list {
  min-width: 1100px;
  // .from {
  //   margin-top: 24px;
  // }
  .cardreader-list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .status {
    height: 52px;
    line-height: 32px;

    font-size: 12px;
    color: #464c5b;
    letter-spacing: 0;
    text-align: justify;
    display: flex;
    padding: 0 10px 10px 20px;
    span {
      // padding: 0 10px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;
    }
    .padding-left {
      padding-left: 20px;
    }
    .padding-right {
      padding-right: 20px;
    }
    .border {
      border-left: 1px solid #979797;
      height: 16px;
      align-self: center;
    }
    .status-i {
      height: 20px;
      padding: 0 10px;
      display: block;
      background: #ffffff;
      // border: 1px solid #2d8cf0;
      border-radius: 10px;
      line-height: 20px;
      font-style: normal;
    }
    .iconshuoming {
      color: orange;
      margin-right: 3px;
    }
  }
}
.modalMachine {
  padding: 0 20px;
  line-height: 25px;
}
</style>
